<template>
  <div class="app-container">
    <el-dialog title="实验室节次选择" :visible.sync="open" width="900px" append-to-body>
        <el-row>
          <span style="font-size: 14px;">当前实验室:</span><span
            style="margin-left: 10px;font-size: 16px;">{{labName}}</span>
        </el-row>
        <el-table v-loading="loading" :data="labReservationList" >
          <el-table-column label="日期" align="center" prop="holidayDate" />
          <el-table-column label="节日名称" align="center" prop="holidayName" width="80" />
          <el-table-column label="周次" align="center" prop="weekNum" />
          <el-table-column label="星期" align="center" prop="dayName" />
          <el-table-column label="工作日" align="center" prop="holidayFlag" :formatter="flagOptFormat" width="60" />
          <el-table-column label="1" align="center" prop="sectionOne" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionOne)" @click="chooseEvent(scope.row,1)"></i>
            </template>
          </el-table-column>
          <el-table-column label="2" align="center" prop="sectionTwo" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionTwo)" @click="chooseEvent(scope.row,2)"></i>
            </template>
          </el-table-column>
          <el-table-column label="3" align="center" prop="sectionThree" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionThree)" @click="chooseEvent(scope.row,3)"></i>
            </template>
          </el-table-column>
          <el-table-column label="4" align="center" prop="sectionFour" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionFour)" @click="chooseEvent(scope.row,4)"></i>
            </template>
          </el-table-column>
          <el-table-column label="5" align="center" prop="sectionFive" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionFive)" @click="chooseEvent(scope.row,5)"></i>
            </template>
          </el-table-column>
          <el-table-column label="6" align="center" prop="sectionSix" width="35">
            <template slot-scope="scope">
              <i :class="getClass(scope.row.sectionSix)" @click="chooseEvent(scope.row,6)"></i>
            </template>
          </el-table-column>
          <el-table-column label="7" align="center" prop="sectionSeven" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionSeven)" @click="chooseEvent(scope.row,7)"></i>
            </template>
          </el-table-column>
          <el-table-column label="8" align="center" prop="sectionEight" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionEight)" @click="chooseEvent(scope.row,8)"></i>
            </template>
          </el-table-column>
          <el-table-column label="9" align="center" prop="sectionNine" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionNine)" @click="chooseEvent(scope.row,9)"></i>
            </template>
          </el-table-column>
          <el-table-column label="10" align="center" prop="sectionTen" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionTen)" @click="chooseEvent(scope.row,10)"></i>
            </template>
          </el-table-column>
          <el-table-column label="11" align="center" prop="sectionEleven" width="35">
            <template slot-scope="scope">
               <i :class="getClass(scope.row.sectionEleven)" @click="chooseEvent(scope.row,11)"></i>
            </template>
          </el-table-column>
          <el-table-column label="12" align="center" prop="sectionTwelve" width="35">
            <template slot-scope="scope">
              <i :class="getClass(scope.row.sectionTwelve)" @click="chooseEvent(scope.row,12)"></i>
            </template>
          </el-table-column>

        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
  import { listLabReservation } from "@/api/labdata/labReservation";

  export default {
    name: "ChooseSection",
    data() {
      return {
        checkedRowList :[],
        checkedDataList:[],
        labName:null,
        labId:null,
        loading: true,
        // 总条数
        total: 0,
        // 实验室是否可预约表格数据
        labReservationList: [],
        // 弹出层标题
        open: false,
        // 是否显示弹出层
        holidayFlagOptions: [],
        // 第一节字典
        sectionOneOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          holidayDate: this.parseTime(new Date(), '{y}-{m}-{d}'),
          holidayName: null,
          holidayFlag: null,
          classRoomId: 1,
        },
      };
    },
    created() {
      this.getDicts("isOrNotOpt").then(response => {
        this.holidayFlagOptions = response.data;
      });
      this.getDicts("sys_reservation").then(response => {
        this.sectionOneOptions = response.data;
      });
    },
    methods: {
      getClass(sectionFlag){
        if(sectionFlag==0){
          return "el-icon-circle-check green";
        }
        if(sectionFlag==1){
          return "el-icon-circle-close red";
        }
        if(sectionFlag==2){
          return "el-icon-circle-check blue";
        }
      },
      chooseEvent(rowData, section){
        let checkedDay = this.checkedRowList[rowData.holidayDate]
        if(!checkedDay){
            checkedDay = {holidayDate:rowData.holidayDate, weekNum:rowData.weekNum, dayName:rowData.dayName};
            this.checkedRowList[rowData.holidayDate] = checkedDay;
            this.checkedDataList.push(checkedDay);
        }
        switch (section){
          case 1:
            if(rowData.sectionOne==0){
              rowData.sectionOne =2;//预定
              checkedDay.sectionOne = 1;
            }else if(rowData.sectionOne==2){
              rowData.sectionOne =0;
              checkedDay.sectionOne = null;
            }
            break;
          case 2:
            if(rowData.sectionTwo==0){
              rowData.sectionTwo =2;//预定
              checkedDay.sectionTwo = 1;
            }else if(rowData.sectionTwo==2){
              rowData.sectionTwo =0;
              checkedDay.sectionTwo = null;
            }
            break;
          case 3:
            if(rowData.sectionThree==0){
              rowData.sectionThree =2;//预定
              checkedDay.sectionThree = 1;
            }else if(rowData.sectionThree==2){
              rowData.sectionThree =0;
              checkedDay.sectionThree = null;
            }
            break;
          case 4:
            if(rowData.sectionFour==0){
              rowData.sectionFour =2;//预定
              checkedDay.sectionFour = 1;
            }else if(rowData.sectionFour==2){
              rowData.sectionFour =0;
              checkedDay.sectionFour = null;
            }
            break;
          case 5:
            if(rowData.sectionFive==0){
              rowData.sectionFive =2;//预定
              checkedDay.sectionFive = 1;
            }else if(rowData.sectionFive==2){
              rowData.sectionFive =0;
              checkedDay.sectionFive = null;
            }
            break;
          case 6:
            if(rowData.sectionSix==0){
              rowData.sectionSix =2;//预定
              checkedDay.sectionSix = 1;
            }else if(rowData.sectionSix==2){
              rowData.sectionSix =0;
              checkedDay.sectionSix = null;
            }
            break;
          case 7:
            if(rowData.sectionSeven==0){
              rowData.sectionSeven =2;//预定
              checkedDay.sectionSeven = 1;
            }else if(rowData.sectionSeven==2){
              rowData.sectionSeven =0;
              checkedDay.sectionSeven = null;
            }
            break;
          case 8:
            if(rowData.sectionEight==0){
              rowData.sectionEight =2;//预定
              checkedDay.sectionEight = 1;
            }else if(rowData.sectionEight==2){
              rowData.sectionEight =0;
              checkedDay.sectionEight = null;
            }
            break;
          case 9:
            if(rowData.sectionNine==0){
              rowData.sectionNine =2;//预定
              checkedDay.sectionNine = 1;
            }else if(rowData.sectionNine==2){
              rowData.sectionNine =0;
              checkedDay.sectionNine = null;
            }
            break;
          case 10:
            if(rowData.sectionTen==0){
              rowData.sectionTen =2;//预定
              checkedDay.sectionTen = 1;
            }else if(rowData.sectionTen==2){
              rowData.sectionTen =0;
              checkedDay.sectionTen = null;
            }
            break;
          case 11:
            if(rowData.sectionEleven==0){
              rowData.sectionEleven =2;//预定
              checkedDay.sectionEleven = 1;
            }else if(rowData.sectionEleven==2){
              rowData.sectionEleven =0;
              checkedDay.sectionEleven = null;
            }
            break;
          case 12:
            if(rowData.sectionTwelve==0){
              rowData.sectionTwelve =2;//预定
              checkedDay.sectionTwelve = 1;
            }else if(rowData.sectionTwelve==2){
              rowData.sectionTwelve =0;
              checkedDay.sectionTwelve = null;
            }
            break;
          default:
            break;
        }
      },
      /** 查询实验室是否可预约列表 */
      getList() {
        this.loading = true;
        listLabReservation(this.queryParams).then(response => {
          this.labReservationList = response.rows;
          for (const item of this.labReservationList) {
            const checkedRow = this.checkedRowList[item.holidayDate]
            if (checkedRow) {
              for (const key in checkedRow) {
                if (key.startsWith('section') && checkedRow[key] === 1) {
                  item[key] = 2
                }
              }
            }
          }
          this.total = response.total;
          this.loading = false;
        });
      },
      // 单位字典翻译
      flagOptFormat(row, column) {
        return this.selectDictLabel(this.holidayFlagOptions, row.holidayFlag);
      },
      // 第一节字典翻译
      sectionOneFormat(row, column) {
        return this.selectDictLabel(this.sectionOneOptions, row.sectionOne);

      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      isPermit(permitKey) {
        if (this.$store.state.user.name == 'admin') {
          return true;
        }
        let permissions = this.$store.getters.permissions;
        return permissions.includes(permitKey);
      },
      submitForm(){
        let showCheckedList = '';
        this.checkedDataList.forEach(item=>{
          showCheckedList += '第'+item.weekNum+'周 / '+item.dayName +" ";
          if(item.sectionOne){
            showCheckedList = showCheckedList +'1,'
          }
          if(item.sectionTwo){
            showCheckedList = showCheckedList +'2,'
          }
          if(item.sectionThree){
            showCheckedList = showCheckedList +'3,'
          }
          if(item.sectionFour){
            showCheckedList = showCheckedList +'4,'
          }
          if(item.sectionFive){
            showCheckedList = showCheckedList +'5,'
          }
          if(item.sectionSix){
            showCheckedList = showCheckedList +'6,'
          }
          if(item.sectionSeven){
            showCheckedList = showCheckedList +'7,'
          }
          if(item.sectionEight){
            showCheckedList = showCheckedList +'8,'
          }
          if(item.sectionNine){
            showCheckedList = showCheckedList +'9,'
          }
          if(item.sectionTen){
            showCheckedList = showCheckedList +'10,'
          }
          if(item.sectionEleven){
            showCheckedList = showCheckedList +'11,'
          }
          if(item.sectionTwelve){
            showCheckedList = showCheckedList +'12,'
          }
          showCheckedList = showCheckedList.substring(0, showCheckedList.lastIndexOf(","))+' 节;';
        });
        this.$emit("chooseResult",showCheckedList, JSON.stringify(this.checkedDataList));
        this.open = false;
      },
    }
  };
</script>
<style type="text/css" scoped>
  .input_w {
    width: 180px;
  }

  .back {
    background: linear-gradient(225deg, #9185FF 0%, #6392FF 100%);
    font-size: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    color: #fff;
    position: absolute;
    left: 30px;
    z-index: 999
  }

  .checkmark {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #009933;
    display: inline-block;
    position: relative;
  }

  .checkmark:before,
  .checkmark::after {
    content: "";
    height: 14px;
    width: 3px;
    border-radius: 5px;
    display: block;
    background: white;
    position: absolute;
    top: 3px;
    /*40-6=34*/
    left: 10px;
    /*make the two rects in the middle of the cycle */
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  }

  .checkmark::before {
    height: 7px;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: absolute;
    top: 9px;
    /*40-18=12  */
    left: 4px;
  }

  .fork {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: red;
    display: inline-block;
    position: relative;
  }

  .g-right {
    display: inline-block;
    width: 15px;
    height: 2px;
    background: #fff;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: 8px;
    left: 3px;
  }

  .g-right:after {
    content: "/";
    display: block;
    width: 15px;
    height: 2px;
    background: #fff;
    -webkit-transform: rotate(-90deg);
  }
  .red {
    color:red;
  }
  .green {
    color: green;
  }
  .blue {
    color: blue;
  }
</style>
